<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>商品添加</title>
    <link th:href="@{/css/bootstrap.css}" rel="stylesheet">
    <style type="text/css">
        .sku {
            width: 100%;
        }
    </style>
</head>
<body>

<div class="container-fluid">
    <div class="page-content" style="margin-top:-10px">
        <div class="page-header">
            <h2>
                温馨提示：
                <small>
                    商品添加/修改成功后，请重新审核后上架
                </small>
            </h2>
        </div>
        <input type="hidden" id="id" th:value="${goods?.id}">
        <div class="widget-main">
            <table class="table table-bordered table-striped">
                <tbody>
                <tr>
                    <td align="right">
                        <span class="red">*</span><strong>商品名称：</strong>
                    </td>
                    <td>
                        <input type="text" id="goods_name" name="good_name" th:value="${goods?.name}">
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        <span class="red">*</span><strong>价格</strong>
                    </td>
                    <td>
                        <input type="number" id="price" name="price" th:value="${goods?.price}">
                    </td>
                    <td align="right">
                        <span class="red">*</span><strong>专柜价</strong>
                    </td>
                    <td>
                        <input type="number" id="sPrice" name="sPrice" th:value="${goods?.sPrice}">
                    </td>
                    <td align="right">
                        <span class="red">*</span><strong>折扣</strong>
                    </td>
                    <td>
                        <input type="number" id="discount" name="discount" th:value="${goods?.discount}">
                    </td>
                </tr>
                <tr>
                    <td align="right"><span class="red">*</span><strong>商品类型：</strong></td>
                    <td>
                        <select name="type_id" id="type_id" style="width:252px;font-size:14px" class="selectBox">
                            <option value="">请选择...</option>
                            <option th:each="goodsType:${goodsTypeList}"
                                    th:value="${goodsType.id}"
                                    th:text="${goodsType.name}"
                                    th:selected="${goods} != null and ${goods.typeId}==${goodsType.id}"></option>
                        </select>
                    </td>
                </tr>
<!--                <tr>-->
<!--                    <td align="right"><strong>图片预览：</strong></td>-->
<!--                    <td>-->
<!--                        <div id="sm_div">-->
<!--                            <img id="img" th:src="${goods?.pic}"-->
<!--                                 style="width:240px;height:150px;border:1px solid #ddd;">-->
<!--                        </div>-->
<!--                    </td>-->
<!--                </tr>-->
<!--                <tr>-->
<!--                    <td align="right"><span class="red">*</span><strong>上传图片：</strong></td>-->
<!--                    <td>-->
<!--                        <input type="file" name="file" id="file" style="width:540px;height:22px;cursor:hand"-->
<!--                               class="fileinput" onchange="upload()">-->
<!--                        <input type="hidden" id="filePath" th:value="${goods?.pic}"/>-->
<!--                    </td>-->
<!--                </tr>-->
                <tr>
                    <td align="right"><span class="red">*</span><strong>商品描述：</strong></td>
                    <td>
                        <textarea id="description" th:text="${goods?.description}" name="description_desc"
                                  style="width:540px; height: 160px;"></textarea>
                    </td>
                </tr>
                <tr>
                    <td align="right"><span class="red">*</span><strong>内容规格：</strong></td>
                    <td>
                        <textarea id="parameters" th:text="${goods?.parameters}" name="parameters_desc"
                                  style="width:540px; height: 160px;"></textarea>
                    </td>
                </tr>
                <tr>
                    <td align="right"><span class="red">*</span><strong>商品型号：</strong></td>
                    <td>
                        <table id="tcbg" class="table table-bordered table-striped">
                            <tbody>
                            <tr>
                                <th align="left" style="background-color:#F9F9F9">(<span style="color:red">*</span>)颜色
                                </th>
                                <th align="left" style="background-color:#F9F9F9">(<span style="color:red">*</span>)图片
                                </th>
                                <th align="left" style="background-color:#F9F9F9">(<span style="color:red">*</span>)上传图片
                                </th>
                                <th align="left" style="background-color:#F9F9F9">(<span style="color:red">*</span>)库存
                                </th>
                            </tr>
                            <tr th:each="gc:${goodsColorList}">


                                    <td><input  class="sku" data='color'/></td>
                                    <td>
                                        <div class="sm_div">
                                            <img class="img" th:src="${gc?.pic}"
                                                 style="width:240px;height:150px;border:1px solid #ddd;">
                                        </div>
                                    </td>

                                    <td>
                                        <input type="file" name="file" style="width:540px;height:22px;cursor:hand"
                                               class="fileinput" onchange="upload()">
                                        <input type="hidden" class="filePath" th:value="${gc?.pic}"/>
                                    </td>
                                    <td><input type="number" class="sku" data='stock'/>



                            </tr>
                            </tbody>
                        </table>
                        <div style="margin-top:10px">
                            <button class="btn btn-sm btn-primary" onclick="insertRows()">
                                <i class="icon-save"></i>
                                增加
                            </button>
                            <button class="btn btn-sm btn-danger" onclick="delRows()">
                                <i class="icon-save"></i>
                                删除
                            </button>
                            (<span style="color:red">提示信息：</span>上述所有输入项均为必填项目，请务必填入相应值后保存！)
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" align="center">
                        <span onclick="save();" class="btn btn-lxg btn-primary">
                            <i class="icon-save bigger-120"></i>保存
                        </span>
                        <span onclick="backToGoodsList()" class="btn btn-lxg btn-undo">
                            <i class="icon-undo bigger-120"></i>返回
                        </span>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script th:src="@{/js/jquery.js}"></script>
<script th:src="@{/js/bootstrap.js}"></script>

<script type="text/javascript" th:inline="javascript">
    // /*<![CDATA[*/
    // var base = /*[[@{/}]]*/ ''; //获取context-path
    // /*]]>*/
    // var url = "";

    function reload(address){
        if(address == null){
            address = url;
        }
        // $("#right").load(address);
        // $(".modal-backdrop").remove();
        window.location.href =address;
    }

    function post(url , jsonData , success , error){
        $.post(url ,
            jsonData,
            function(data){
                console.log(data);
                if (data.success){ //business logic is success
                    if (success) success(data);  //callback
                } else{ //business logic is error
                    if (error) error(data); else alert(data.error);
                }
            });
    }

</script>

<script type="text/javascript">
    function backToGoodsList() {
        reload("goods/list");
    }

    function insertRows() {
        var row = "<tr class=\"trSku\">" +
            "<td><input  class=\"sku\" data='color'/></td>" +
            "<td><img  style=\"width:240px;height:150px;border:1px solid #ddd;\" class=\"sku\" src='' data='img'/></td>" +
            // "<td><input type=\"number\" class=\"sku\" data='price'/></td>" +
            "<td><input type=\"file\" class=\"upload\" data='upload' onchange='upload(this)'/></td>" +
            "<td><input type=\"number\" class=\"sku\" data='stock'/>" +
            "<input type=\"hidden\" class=\"filePath\" /></td>" +
            "</tr>";
        $("#tcbg > tbody").append(row);
    }

    function delRows() {
        var trs = $("#tcbg > tbody > .trSku");
        trs.eq(trs.length - 1).remove();
    }

    function upload(tempt) {
        var file = $(tempt).files[0];
        var fd = new FormData();
        fd.append('file', file);
        $.ajax({
            url: 'goods/upload',
            dataType: 'json',
            type: 'POST',
            async: true,
            data: fd,
            processData: false,
            contentType: false,
            success: function (result) {
                if (result.success) {
                    //$("#filePath").val(result.data);
                    $(tempt).parent().find(".filePath").val(result.data);
                    $(tempt).parent().prev().find("img").attr("src", result.data);
                }
            }
        });
    }

    function save() {
        var id = $("#id").val();
        var form = {
            "name": null,
            "typeId": null,
            "pic": null,
            "promote": null,
            "skuTitle": null,
            "skuCost": null,
            "skuPrice": null,
            "skuPmoney": null,
            "orderNum": null
        };
        if (id.toString().length > 0) {
            form.id = id;
        } else {
            form.id = undefined;
        }
        form.name = $("#goods_name").val();
        form.typeId = $("#type_id").val();
        form.pic = $("#filePath").val();
        form.promote = $("#promote").val();
        form.orderNum = $("#orderNum").val();
        form.skuTitle = []; // 描述
        form.skuCost = []; //成本
        form.skuPrice = []; //商品单价
        form.skuPmoney = []; //分成

        var trTitles = $("input[data=title]");
        var trCosts = $("input[data=cost]");
        var trPrices = $("input[data=price]");
        var trPmoneys = $("input[data=pmoney]");

        $.each(trTitles, function (i, input) {
            form.skuTitle.push($(input).val());
        });
        $.each(trCosts, function (i, input) {
            form.skuCost.push($(input).val());
        });
        $.each(trPrices, function (i, input) {
            form.skuPrice.push($(input).val());
        });
        $.each(trPmoneys, function (i, input) {
            form.skuPmoney.push($(input).val());
        });
        form.skuTitle = form.skuTitle.join("|"); // 描述
        form.skuCost = form.skuCost.join("|"); //成本
        form.skuPrice = form.skuPrice.join("|"); //商品单价
        form.skuPmoney = form.skuPmoney.join("|"); //分成

        post("goods/save", form, function (result) {
            backToGoodsList();
        });
    }
</script>

</body>
</html>